html, body, #app {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Electron 内使用：避免外层产生滚动条，由内部主内容区域滚动 */
body { overflow: hidden; }

/* 修正 Electron 环境下窗口可视高度计算：
   如果顶部 header 为 60px，高度应由布局样式控制，避免底部空白 */

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

/* ============ 主题切换样式 ============ */

/* 浅色模式（默认） */
html {
  background-color: #f5f7fa;
  color: #2c3e50;
  /* 主题切换过渡动画 */
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  background-color: #f5f7fa;
  transition: background-color 0.3s ease;
}

/* ============ 暗黑模式 ============ */
html.dark {
  background-color: #141414;
  color: #e5eaf3;
  color-scheme: dark;
}

html.dark body {
  background-color: #141414;
}

/* 暗黑模式 - 主内容区 */
html.dark .el-main {
  background-color: #141414;
  color: #e5eaf3;
}

/* 暗黑模式 - 卡片和容器 */
html.dark .el-card {
  background-color: #1e1e1e;
  border-color: #303030;
}

html.dark .el-card__header {
  background-color: #252525;
  border-bottom-color: #303030;
  color: #e5eaf3;
}

html.dark .el-card__body {
  background-color: #1e1e1e;
  color: #e5eaf3;
}

/* 暗黑模式 - 表格描述组件 */
html.dark .el-descriptions {
  background-color: #1e1e1e;
  --el-text-color-regular: #e5eaf3;
}

html.dark .el-descriptions__header {
  background-color: #252525;
  color: #e5eaf3;
}

html.dark .el-descriptions__label {
  background-color: #252525 !important;
  color: #b3b3b3 !important;
}

html.dark .el-descriptions__content {
  background-color: #1e1e1e !important;
  color: #e5eaf3 !important;
}

html.dark .el-descriptions__cell {
  border-color: #303030 !important;
}

html.dark .el-descriptions__body {
  background-color: #1e1e1e;
  color: #e5eaf3;
}

/* 暗黑模式 - 表单 */
html.dark .el-form-item__label {
  color: #b3b3b3;
}

html.dark .el-input__wrapper {
  background-color: #1e1e1e;
  border-color: #3f3f3f;
  box-shadow: 0 0 0 1px #3f3f3f inset;
}

html.dark .el-input__wrapper:hover {
  box-shadow: 0 0 0 1px #4f4f4f inset;
}

html.dark .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
}

html.dark .el-input__inner {
  color: #e5eaf3;
  background-color: transparent;
}

html.dark .el-input.is-disabled .el-input__wrapper {
  background-color: #2a2a2a;
  box-shadow: 0 0 0 1px #3f3f3f inset;
}

html.dark .el-input.is-disabled .el-input__inner {
  color: #666;
}

html.dark .el-textarea__inner {
  background-color: #1e1e1e;
  border-color: #3f3f3f;
  color: #e5eaf3;
}

/* 暗黑模式 - 按钮 */
html.dark .el-button--primary {
  --el-button-bg-color: #409eff;
  --el-button-border-color: #409eff;
}

html.dark .el-button--default {
  background-color: #2a2a2a;
  border-color: #4f4f4f;
  color: #e5eaf3;
}

html.dark .el-button--default:hover {
  background-color: #353535;
  border-color: #5f5f5f;
}

/* 暗黑模式 - 滚动条 */
html.dark .el-scrollbar__thumb {
  background-color: #3f3f3f;
}

html.dark .el-scrollbar__thumb:hover {
  background-color: #5f5f5f;
}

/* 暗黑模式 - 面包屑 */
html.dark .el-breadcrumb {
  color: #b3b3b3;
}

html.dark .el-breadcrumb__separator {
  color: #666;
}

html.dark .el-breadcrumb__inner {
  color: #e5eaf3;
}

html.dark .el-breadcrumb__inner.is-link {
  color: #b3b3b3;
}

html.dark .el-breadcrumb__inner.is-link:hover {
  color: #42d392;
}

/* 暗黑模式 - 分割线 */
html.dark .el-divider {
  border-color: #303030;
}

/* 暗黑模式 - 页面容器 */
html.dark .profile-container,
html.dark .settings-container {
  background-color: transparent;
}

/* 暗黑模式 - 通用标题元素 */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: #e5eaf3 !important;
}

/* 暗黑模式 - 页面级容器 */
html.dark .profile-page,
html.dark .settings-page {
  color: #e5eaf3;
}

/* 暗黑模式 - 通知顶部提示 */
html.dark .theme-notice {
  background-color: #252525;
  border-color: #303030;
  color: #b3b3b3;
}

/* Header右上角图标统一大小（深浅色通用）*/
.header-actions .icon-btn {
  font-size: 20px !important;
}

.header-actions .icon-btn:hover {
  transform: scale(1.1);
}

.header-actions .icon-btn:active {
  transform: scale(0.95);
}

/* 暗黑模式 - Header右上角图标颜色增强 */
html.dark .header-actions .icon-btn {
  color: #e5eaf3 !important;
}

html.dark .header-actions .icon-btn:hover {
  color: #42d392 !important;
}

/* 暗黑模式 - 对话框 */
html.dark .el-dialog {
  background-color: #1e1e1e;
  border: 1px solid #303030;
}

html.dark .el-dialog__header {
  background-color: #252525;
  border-bottom-color: #303030;
}

html.dark .el-dialog__title {
  color: #e5eaf3;
}

html.dark .el-dialog__body {
  color: #e5eaf3;
}

/* 暗黑模式 - 下拉选择 */
html.dark .el-select-dropdown {
  background-color: #1e1e1e;
  border-color: #3f3f3f;
}

html.dark .el-select-dropdown__item {
  color: #e5eaf3;
}

html.dark .el-select-dropdown__item:hover {
  background-color: #2a2a2a;
}

html.dark .el-select-dropdown__item.selected {
  color: var(--el-color-primary);
  background-color: #2a2a2a;
}

/* 暗黑模式 - Radio单选框 */
html.dark .el-radio {
  color: #e5eaf3;
  background-color: transparent !important;
}

html.dark .el-radio__label {
  color: #e5eaf3;
}

html.dark .el-radio__inner {
  background-color: #3a3a3a !important;
  border-color: #606060 !important;
}

html.dark .el-radio__input.is-checked .el-radio__inner {
  background-color: var(--el-color-primary) !important;
  border-color: var(--el-color-primary) !important;
}

html.dark .el-radio__input:not(.is-checked) .el-radio__inner {
  background-color: #3a3a3a !important;
}

/* 暗黑模式 - Switch开关 */
html.dark .el-switch__core {
  background-color: #4f4f4f;
  border-color: #4f4f4f;
}

html.dark .el-switch.is-checked .el-switch__core {
  background-color: var(--el-color-primary);
  border-color: var(--el-color-primary);
}

/* 暗黑模式 - Slider滑块 */
html.dark .el-slider__runway {
  background-color: #4f4f4f;
}

html.dark .el-slider__bar {
  background-color: var(--el-color-primary);
}

html.dark .el-slider__button {
  border-color: var(--el-color-primary);
}

/* 暗黑模式 - 表格 */
html.dark .el-table {
  --el-table-bg-color: #1e1e1e;
  --el-table-tr-bg-color: #1e1e1e;
  --el-table-header-bg-color: #252525;
  --el-table-row-hover-bg-color: #2a2a2a;
  --el-table-border-color: #303030;
  --el-table-text-color: #e5eaf3;
  --el-table-header-text-color: #b3b3b3;
}

html.dark .el-table__empty-text {
  color: #666;
}

/* 暗黑模式 - 骨架屏 */
html.dark .el-skeleton {
  --el-skeleton-color: #252525;
  --el-skeleton-to-color: #303030;
}

html.dark .el-skeleton__item {
  background: linear-gradient(90deg, #252525 25%, #303030 37%, #252525 63%);
}

/* 暗黑模式 - 头像 */
html.dark .el-avatar {
  background-color: #252525;
  color: #b3b3b3;
}

/* 暗黑模式 - 日期选择器 */
html.dark .el-date-editor {
  --el-fill-color-blank: #1e1e1e;
  --el-border-color: #3f3f3f;
  --el-text-color-regular: #e5eaf3;
}

html.dark .el-date-editor .el-input__wrapper {
  background-color: #1e1e1e;
  box-shadow: 0 0 0 1px #3f3f3f inset;
}

html.dark .el-date-editor .el-input__inner {
  color: #e5eaf3;
}

/* 暗黑模式 - 弹出层 */
html.dark .el-popper {
  background-color: #1e1e1e;
  border-color: #3f3f3f;
}

/* 暗黑模式 - Tooltip提示框（使用多种选择器确保生效）*/
html.dark .el-popper.is-dark,
html.dark .el-tooltip__popper,
html.dark div[role="tooltip"],
html.dark .el-popper[data-popper-placement] {
  background-color: #4a4a4a !important;
  border: 1px solid #666 !important;
  color: #ffffff !important;
}

html.dark .el-popper.is-dark .el-popper__arrow::before,
html.dark .el-tooltip__popper .el-popper__arrow::before,
html.dark div[role="tooltip"] .el-popper__arrow::before {
  background: #4a4a4a !important;
  border-color: #666 !important;
}

/* 针对不同位置的箭头 */
html.dark [data-popper-placement^="top"] .el-popper__arrow::before {
  background: #4a4a4a !important;
  border-top-color: #666 !important;
  border-left-color: #666 !important;
}

html.dark [data-popper-placement^="bottom"] .el-popper__arrow::before {
  background: #4a4a4a !important;
  border-bottom-color: #666 !important;
  border-right-color: #666 !important;
}

html.dark [data-popper-placement^="left"] .el-popper__arrow::before {
  background: #4a4a4a !important;
  border-left-color: #666 !important;
  border-bottom-color: #666 !important;
}

html.dark [data-popper-placement^="right"] .el-popper__arrow::before {
  background: #4a4a4a !important;
  border-right-color: #666 !important;
  border-top-color: #666 !important;
}

/* 确保tooltip内部文字颜色 */
html.dark .el-popper.is-dark *,
html.dark .el-tooltip__popper *,
html.dark div[role="tooltip"] * {
  color: #ffffff !important;
}

html.dark .el-picker-panel {
  background-color: #1e1e1e;
  border-color: #3f3f3f;
  color: #e5eaf3;
}

html.dark .el-date-picker__header-label {
  color: #e5eaf3;
}

html.dark .el-date-table td.available:hover {
  color: #42d392;
}

html.dark .el-date-table td.today span {
  color: #42d392;
}

html.dark .el-date-table td.current:not(.disabled) span {
  background-color: #42d392;
  color: #1a1a1a;
}

/* 暗黑模式 - 上传组件 */
html.dark .el-upload {
  border-color: #3f3f3f;
}

html.dark .el-upload:hover {
  border-color: #42d392;
}

html.dark .el-upload-dragger {
  background-color: #1e1e1e;
  border-color: #3f3f3f;
}

html.dark .el-upload-dragger:hover {
  border-color: #42d392;
}

/* 暗黑模式 - Drawer抽屉 */
html.dark .el-drawer {
  background-color: #1e1e1e;
  color: #e5eaf3;
}

html.dark .el-drawer__header {
  color: #e5eaf3;
  border-bottom-color: #303030;
}

html.dark .el-drawer__title {
  color: #e5eaf3;
}

html.dark .el-drawer__body {
  background-color: #1e1e1e;
}

/* 暗黑模式 - Badge徽章 */
html.dark .el-badge__content {
  background-color: #f56c6c;
  border-color: #1e1e1e;
}

/* 暗黑模式 - Empty空状态 */
html.dark .el-empty__description {
  color: #909399;
}

/* 通用 - 数字输入框布局优化（深色浅色都生效）*/
.el-input-number {
  display: inline-flex !important;
  line-height: 1 !important;
  width: auto !important;
}

/* 滑块内的数字输入框（系统设置页面专用：窄版）*/
.el-slider__input .el-input-number {
  width: 100px !important;
}

.el-slider__input .el-input-number .el-input__inner {
  text-align: center !important;
}

.el-slider__input .el-input-number__decrease {
  border-right: none !important;
}

.el-slider__input .el-input-number__increase {
  border-left: none !important;
}

/* 普通数字输入框（购物车等页面：正常宽度）*/
.el-input-number .el-input__inner {
  text-align: center !important;
}

.el-input-number__decrease {
  border-right: none !important;
}

.el-input-number__increase {
  border-left: none !important;
}

/* 暗黑模式 - 数字输入框（只改颜色，不改布局）*/
html.dark .el-input-number .el-input__wrapper {
  background-color: #3a3a3a !important;
  box-shadow: 0 0 0 1px #606060 inset !important;
}

html.dark .el-input-number .el-input__inner {
  color: #e5eaf3 !important;
}

html.dark .el-input-number__decrease,
html.dark .el-input-number__increase {
  background-color: #3a3a3a !important;
  border-color: #606060 !important;
  color: #e5eaf3 !important;
}

html.dark .el-input-number__decrease:hover,
html.dark .el-input-number__increase:hover {
  background-color: #4a4a4a !important;
}

html.dark .el-input-number__decrease:hover,
html.dark .el-input-number__increase:hover {
  color: #42d392 !important;
}

/* 暗黑模式 - Settings页面特定样式 */
html.dark .settings-card {
  background-color: #1e1e1e !important;
  border-color: #303030 !important;
}

html.dark .settings-group {
  background-color: #1a1a1a !important;
}

html.dark .group-header {
  background-color: #252525 !important;
  border-bottom-color: #303030;
}

html.dark .group-title {
  color: #e5eaf3 !important;
}

html.dark .group-body {
  background-color: #1e1e1e !important;
}

html.dark .setting-item {
  border-bottom-color: #303030;
}

html.dark .label-text {
  color: #e5eaf3 !important;
}

html.dark .label-desc {
  color: #b3b3b3 !important;
}

html.dark .radio-custom .radio-content .el-icon {
  color: #ffd04b !important;
}

/* 暗黑模式 - 滑块内的数字输入框（只改颜色）*/
html.dark .el-slider__input .el-input-number .el-input__wrapper {
  background-color: #3a3a3a !important;
  box-shadow: 0 0 0 1px #606060 inset !important;
}

html.dark .el-slider__input .el-input-number .el-input__inner {
  color: #e5eaf3 !important;
}

html.dark .el-slider__input .el-input-number__decrease,
html.dark .el-slider__input .el-input-number__increase {
  background-color: #3a3a3a !important;
  border-color: #606060 !important;
  color: #e5eaf3 !important;
}

/* 暗黑模式 - 象棋页面特定样式 */
html.dark .chess-game-page .card-header {
  color: #e5eaf3 !important;
}

html.dark .chess-game-page .label,
html.dark .chess-game-page .setting-label,
html.dark .chess-game-page .timer-label,
html.dark .chess-game-page .group-title {
  color: #e5eaf3 !important;
}

html.dark .chess-game-page .player-red {
  color: #ff6b6b !important;
}

html.dark .chess-game-page .player-black {
  color: #ffffff !important;
}

html.dark .chess-game-page .status,
html.dark .chess-game-page .count {
  color: #ffffff !important;
}

html.dark .chess-game-page .timer-item {
  background: #2a2a2a !important;
  border-color: #3f3f3f !important;
}

html.dark .chess-game-page .timer-value {
  color: #ffffff !important;
}

html.dark .chess-game-page .ai-thinking {
  background: linear-gradient(135deg, #2a2a3e 0%, #3a2a4e 100%) !important;
  border-color: #4a3a5e !important;
}

html.dark .chess-game-page .ai-thinking .thinking-text {
  color: #b39ddb !important;
}

html.dark .chess-game-page .captured-piece {
  background: radial-gradient(circle, #3a3a3a 0%, #2a2a2a 100%) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

html.dark .chess-game-page .captured-piece.piece-red {
  color: #ff6b6b !important;
  border-color: #ff6b6b !important;
}

html.dark .chess-game-page .captured-piece.piece-black {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html.dark .chess-game-page .no-pieces {
  color: #999 !important;
}

html.dark .chess-game-page .move-item {
  color: #ffffff !important;
}

html.dark .chess-game-page .move-item:hover {
  background: #2a2a2a !important;
}

html.dark .chess-game-page .current-move {
  background: #2a3a4a !important;
}

html.dark .chess-game-page .move-number {
  color: #e5eaf3 !important;
}

html.dark .chess-game-page .move-text {
  color: #ffffff !important;
}

html.dark .chess-game-page .no-moves {
  color: #999 !important;
}


